<template>
    <!-- 页面暂不使用 -->
    <div class="view-body">
        <div class="header-select">
            <van-dropdown-menu active-color="#075ebb">
                <!--推荐类型-->
                <van-dropdown-item :title="typeTitle" v-model="recommendData.recommendType" :options="typeList" @change="getCourseType()"/>
                <van-dropdown-item :title="$t('more_text')" class="headerSelect-alert2" ref="moreRef">
                    <ul>
                        <li>
                            <span>{{ $t("cos_type") }}</span><!--课程类型-->
                            <p>
                                <em v-for="(item, $index) in getItemTypes" :key="$index" :class="{'cur': recommendData.itemType == item.value}">
                                    <label :for="item.value">{{item.type}}</label>
                                    <input hidden v-model="recommendData.itemType" type="radio" name="input1" :id="item.value" :value="item.value">
                                </em>
                            </p>
                        </li>
                        <li>
                            <span>{{ $t("cos_learn_required") }}</span><!--学习要求-->
                            <p>
                                <em v-for="(item, $index) in compulsoryTypes" :key="$index" :class="{'cur': recommendData.isCompulsory == item.value}">
                                    <label :for="item.value + $index">
                                        {{item.type}}
                                    </label>
                                    <input type="radio" hidden :id="item.value + $index" :value="item.value" v-model="recommendData.isCompulsory">
                                </em>
                            </p>
                        </li>
                        <li>
                            <span>{{ $t("cos_app_status") }}</span><!--学习状态-->
                            <p>
                                <em v-for="(item, $index) in appStatus" :key="item.value" :class="{'cur': recommendData.appStatus == item.value}">
                                    <label :for="'status' + item.value + $index">{{item.type}}</label>
                                    <input type="radio" hidden v-model="recommendData.appStatus" :value="item.value" :id="'status' + item.value + $index">
                                </em>
                            </p>
                        </li>
                        <li @click="getMore">{{ $t("sure") }}</li><!--确定-->
                    </ul>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <!--我的课程-->
        <div style="height: calc(100% - 50px);" class="body-content" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getCourseList"
                >
                    <div class="box2" v-bind:class="{'height100' : total === 0}">
                        <div v-for="(item, index) in courseList" :key="index" class="view-body-content bottom-shadow">
                            <div class="view-bodyContent-img" @click="detailsJump(item.itmId, item.itmType, item.itmTitle)">
                                <div class="view-bodyContent-img-mask"></div>
                                <img :src="appUrl + item.itmIcon" alt=""/>
                                <div class="view-bodyContent-img-body">
                                    <span><i class="public-mobile-icon-white"></i>{{item.itmTitle}}</span>
                                    <div class="view-bodyContent-img-body-time">
                                        <div class="recommend-type-box"><span v-if="item.itdGroupInd">{{ $t("cos_recommend_tadm") }}</span><span v-if="item.itdGradeInd">{{ $t("cos_recommend_grade") }}</span><span v-if="item.itdPositionInd">{{ $t("cos_recommend_position") }}</span>
                                        <span v-if="item.itdBossInd">{{ $t("cos_recommend_sup") }}</span>
                                        </div>
                                        <!--培训部推荐/职级推荐/岗位推荐/上司推荐-->
                                        <div>{{ item.itmPublishTimestamp | substringTime }}</div>
                                    </div>
                                </div>
                                <div class="view-bodyContent-img-status">
                                    <div v-show="item.itdCompulsoryInd == 1">{{ $t("cos_required") }}</div><!--必修-->
                                    <div v-for="(name, $index) in statusType" :key="$index" :style="{'background': name.status.indexOf(item.appStatus) != -1?name.color:''}" v-show="name.status.indexOf(item.appStatus) != -1">{{judgeCourseStatus(item.appStatus)}}</div>
                                </div>
                            </div>
                            <div class="view-bodyContent-topic">
                                <div>
                                    {{ courseType[item.itmType] }}
                                </div>
                                <div>
                                    <span :class="{'cur': item.snsCollect}"  v-collection="{type: 'Course', id: item.itmId, isClick: item.snsCollect? true : false, fn: isCollection}">{{ item.collectionCount ? item.collectionCount : 0 }}</span>
                                    <em>|</em>
                                    <span>{{item.totalLearner ? item.totalLearner : 0}}</span>
                                </div>
                            </div>
                        </div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <common-loading :isLoading="isLoading"></common-loading>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
import CommonLoading from '@/components/common/loading';
export default {
    name: 'RecommendCourse',
    mixins: [mixin],
    components: {
        CommonLoading
    },
    data() {
        return {
            courseList: [],
            pageNo: 1,
            statusType: [
                {
                    status: ['Pending', 'I', 'Waiting', 'IP'], //等待队列/审批中/进行中
                    color: '#075ebb'
                },
                {
                    status: ['C'], //已完成
                    color: '#3dcf7b'
                },
                {
                    status: ['W', 'F', 'Rejected'], //已放弃/未完成
                    color: '#ff9600'
                }
            ],
            selectType: null,
            total: 0,
            itemType: null,
            selectStatus: null,
            isCompulsory: null,
            isLoading: true,
            recommendData: {
                appStatus: 'All', // 学习状态 notapp-未报名 inprocessed-进行中、pending-审批中、completed-已完成、notIAndC-其他、空-查询全部 （最后请求前all变空）
                isCompulsory: 'All', // 规则类型 必修-1、选修-0、空-查询全部
                isExam: false, // 是否是考试 true-是、false-不是
                isMobileInd: true, // 是否移动端显示 true-是 false-不是
                itemType: 'All', // 课程类型 SELFSTUDY:（网上课程 | 网上考试）、CLASSROOM:（面授课程 | 离线考试）、INTEGRATED:项目式课程、空-查询全部
                recommendType: 'All' // 推荐类型 tadm-培训部推荐、grade-职级推荐、sup-上司推荐、position-岗位推荐、空-查询全部
            },
            pageData: {
                pageNo: 1,
                pageSize: 15
            },
            getItemTypes: [
                {value: 'All', type: this.$t('type_all_title')}, //全部
                {value: 'SELFSTUDY', type: this.$t('cos_type_selfstudy')}, //网上课程
                {value: 'CLASSROOM', type: this.$t('cos_type_classroom')}, //面授课程
                {value: 'INTEGRATED', type: this.$t('project_course')} //项目式培训
            ],
            appStatus: [
                {value: 'All', type: this.$t('type_all_title')}, //全部
                {value: 'notapp', type: this.$t('cos_app_notapp')}, // 未报名
                {value: 'inprocessed', type: this.$t('cos_app_inprogress')}, //进行中
                {value: 'pending', type: this.$t('cos_app_pending')}, //审批中
                {value: 'completed', type: this.$t('cos_app_completed')}, //已完成
                {value: 'notIAndC', type: this.$t('cos_other')} //其他
            ],
            types: {
                All: this.$t('type_all_title'),
                tadm: this.$t('cos_recommend_tadm_select'),
                grade: this.$t('cos_recommend_grade_select'),
                sup: this.$t('cos_recommend_sup_select'),
                position: this.$t('cos_recommend_position_select')
            },
            finished: false,
            isRefresh: false,
            dropdownVisible: true,
            typeTitle: this.$t('cos_recommend_type'),
            typeList: []
        };
    },
    methods: {
        init() {
            this.isCompulsory = this.$route.query.isCompulsory;
            this.getCourseList();
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageData.pageNo = 1;
                this.getCourseList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        hideViewBox(num) {
            this['isShow' + num] = false;
        },
        getCourseList(option) {
            this.$axios({
                method: 'POST',
                url: '/app/api/trainee/course/recommend/list?pageNo=' + this.pageData.pageNo + '&pageSize=' + this.pageData.pageSize,
                data: {
                    appStatus: this.recommendData.appStatus === 'All' ? '' : this.recommendData.appStatus, // 学习状态 notapp-未报名 inprocessed-进行中、pending-审批中、completed-已完成、notIAndC-其他、空-查询全部 （最后请求前all变空）
                    isCompulsory: this.recommendData.isCompulsory === 'All' ? '' : this.recommendData.isCompulsory, // 规则类型 必修-1、选修-0、空-查询全部
                    isExam: false, // 是否是考试 true-是、false-不是
                    isMobileInd: true, // 是否移动端显示 true-是 false-不是
                    itemType: this.recommendData.itemType === 'All' ? '' : this.recommendData.itemType, // 课程类型 SELFSTUDY:（网上课程 | 网上考试）、CLASSROOM:（面授课程 | 离线考试）、INTEGRATED:项目式课程、空-查询全部
                    recommendType: this.recommendData.recommendType === 'All' ? '' : this.recommendData.recommendType // 推荐类型 tadm-培训部推荐、grade-职级推荐、sup-上司推荐、position-岗位推荐、空-查询全部
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.courseList = res.data.results;
                    } else {
                        this.courseList = this.courseList.concat(res.data.results);
                    }
                }
                this.isLoading = false;
                this.total = res.data.totalRecord;
                this.pageNo++;
                if (this.courseList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        getCourseType() {
            this.isLoading = true;
            this.pageData.pageNo = 1;
            this.typeTitle = this.types[this.recommendData.recommendType];
            this.courseList = [];
            this.getCourseList();
        },
        getMore() {
            this.isLoading = true;
            this.pageData.pageNo = 1;
            this.courseList = [];
            this.getCourseList();
            this.$refs.moreRef.toggle();
        },
        detailsJump(id, type, title) { //此处需判断公开课的跳转
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${id}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: id, title: title}});
            } else if (type === 'CLASSROOM') {
                this.$router.push({path: `/certifiedCourse/${id}/0/composition`});
            } else {
                this.$router.push({path: `/course/${id}/0`});
            }
        },
        isCollection(action, res) {
            if (action === 'add') {
                // 收藏成功
                this.$toast(this.$t('collect_success'));
            } else if (action === 'cancel') {
                // 已取消收藏
                this.$toast(this.$t('collect_cancel'));
            }
        },
        judgeCourseStatus(status) {
            /*当前课程的状态*/
            let result;
            switch (status) {
            case 'Waiting' :
                result = this.$t('cos_in_wait_list'); //等待队列
                break;
            case 'Pending' :
                result = this.$t('cos_app_pending'); //审批中
                break;
            case 'I' :
                result = this.$t('cos_app_inprogress'); //进行中
                break;
            case 'C' :
                result = this.$t('cos_app_completed'); //已完成
                break;
            case 'F' :
                result = this.$t('cos_app_fail'); //未完成
                break;
            case 'W' :
                result = this.$t('cos_app_withdrawn'); //已放弃
                break;
            case 'Rejected' :
                result = this.$t('approve_status_1'); //已拒绝
                break;
            case 'IP' :
                result = this.$t('cos_app_pending'); //审批中
                break;
            }
            return result;
        },
        // 下拉菜单
        changeTypes() {
            this.typeList = [...this.recommendTypes.map(item => ({text: item.type, value: item.value}))];
        }
    },
    mounted() {
        this.init();
        this.changeTypes();
    },
    activated() {
        let isCompulsory = this.$route.query.isCompulsory;
        if (isCompulsory) {
            this.isLoading = true;
            this.selectStatus = null;
            this.itemType = null;
            this.courseList = [];
            this.init();
        }
    }
};
</script>

<style scoped lang="less">
    .view-bodyContent-img{
        height: 209px
    }
</style>
